<template>
  <div class="main">
    <div class="title card flex-between flex-align-items-center">
      <div class="left flex">
        <p class="font-16">任务标题：{{ taskInfo.title }}</p>
        <p class="font-16">创建日期：{{ taskInfo.time }}</p>
        <p class="font-16">联系人：{{ taskInfo.title }}</p>
      </div>
      <div class="right font-14">{{ taskInfo.status }}</div>
    </div>

    <div class="feat card flex">
      <div class="left">
        <h1 class="font-20">支付报酬</h1>
        <p class="font-30-B">{{ taskInfo.remuneration }}</p>
      </div>
      <div class="right">
        <h1 class="font-20">阶段进度</h1>
        <el-steps :active="taskInfo.step" :align-center="true">
          <el-step title="沟通中" :description="taskInfo.stepTime" />
          <el-step title="合作中" :description="taskInfo.stepTime" />
          <el-step title="合作上线" :description="taskInfo.stepTime" />
          <el-step title="已完成" :description="taskInfo.stepTime" />
        </el-steps>
      </div>
    </div>

    <div class="basic card">
      <p class="basic-title font-20-B">基本信息</p>
      <div class="basic-content flex flex-wrap">
        <div class="basic-item flex">
          <p class="label font-14-B">任务类型：</p>
          <p class="value font-14">{{ taskInfo.title }}</p>
        </div>
        <div class="basic-item flex">
          <p class="label font-14-B">需要的红人分类：</p>
          <p class="value font-14">{{ taskInfo.title }}</p>
        </div>
        <div class="basic-item flex">
          <p class="label font-14-B">需要的红人国家：</p>
          <p class="value font-14">{{ taskInfo.title }}</p>
        </div>
        <div class="basic-item flex">
          <p class="label font-14-B">需要的红人数：</p>
          <p class="value font-14">{{ taskInfo.title }}</p>
        </div>
        <div class="basic-item flex">
          <p class="label font-14-B">愿意支付的报酬：</p>
          <p class="value font-14">{{ taskInfo.title }}</p>
        </div>
        <div class="basic-item flex">
          <p class="label font-14-B">粉丝数量级：</p>
          <p class="value font-14">{{ taskInfo.title }}</p>
        </div>
        <div class="basic-item flex">
          <p class="label font-14-B">发布时间：</p>
          <p class="value font-14">{{ taskInfo.title }}</p>
        </div>
        <div class="basic-item flex">
          <p class="label font-14-B">每人视频数：</p>
          <p class="value font-14">{{ taskInfo.title }}</p>
        </div>
        <div class="basic-item flex">
          <p class="label font-14-B">说明：</p>
          <p class="value font-14">{{ taskInfo.title }}</p>
        </div>
      </div>
    </div>

    <div class="pro card">
      <div class="pro-head flex flex-align-items-center">
        <p class="pro-tab font-16-B">产品信息(一)</p>
      </div>
      <div class="pro-action flex">
        <img :src="proInfo.name">
        <div class="pro-main flex-between flex-column">
          <p class="font-14">产品名称：{{ proInfo.name }}</p>
          <p class="font-14">产品链接：{{ proInfo.name }}</p>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%;" class="table">
        <el-table-column prop="value" label="生成日期" width="180" />
        <el-table-column prop="value" label="任务链接" width="300" />
        <el-table-column prop="value" label="平台" width="150" />
        <el-table-column prop="value" label="类型" width="150" />
        <el-table-column prop="value" label="红人视频链接" width="300" />
        <el-table-column prop="value" label="备注" />
      </el-table>
      <div class="pagination flex flex-align-items-center">
        <el-pagination layout="prev, pager, next, total" :total="form.total" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const taskInfo = ref({
  title: 'xxx',
  time: '2023-12-17',
  status: '等待红人接单',
  remuneration: '待商议',
  step: 2,
  stepTime: '2023-12-17 15:00:00'
});
const proInfo = ref({
  name: 'xxx'
});
const form = ref({
  page: 1,
  perPage: 10,
  total: 1
});
const tableData = ref([]);
</script>

<style lang="less" scoped>
.main {
  padding: 16px;

  .card {
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.title {
  padding: 18px 32px;

  .left {
    p {
      color: rgba(51, 51, 51, .85);
      margin-right: 80px;
    }
  }

  .right {
    color: #666;
  }
}

.feat {
  padding: 20px 32px 16px;

  .left {
    width: 190px;
    height: 100%;
    padding: 4px 0 36px 0;
    position: relative;
    margin-right: 32px;

    &::after {
      content: "";
      width: 1px;
      height: 100%;
      background: #e8e8e8;
      border-radius: 1px;
      position: absolute;
      top: 0;
      right: 0;
    }

    h1 {
      line-height: 28px;
      font-size: 20px;
      font-weight: 700;
      color: rgba(51, 51, 51, .85);
      margin-bottom: 24px;
    }

    p {
      color: @main-color;
    }
  }

  .right {
    flex: 1;

    h1 {
      line-height: 28px;
      font-size: 20px;
      font-weight: 700;
      color: rgba(51, 51, 51, .85);
      margin-bottom: 24px;
    }
  }
}

.basic {
  padding: 24px 32px 32px;

  .basic-title {
    height: 53px;
    color: rgba(51, 51, 51, .85);
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 24px;
  }

  .basic-content {
    .basic-item {
      width: 50%;
      margin-bottom: 24px;

      &:last-child {
        width: 100%;
        margin-bottom: 0;
      }

      .label {
        width: 112px;
        margin-right: 20px;
        line-height: 32px;
        color: rgba(51, 51, 51, .85);
        text-align: right;
      }

      .value {
        flex: 1;
        line-height: 32px;
        color: rgba(51, 51, 51, .85);
      }
    }
  }
}

.pro {
  padding: 0 32px 32px;

  .pro-head {
    height: 77px;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
    margin-bottom: 24px;

    &::after {
      content: "";
      width: 114px;
      height: 2px;
      background: #ff5277;
      border-radius: 1px;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    .pro-tab {
      width: 114px;
      text-align: center;
      color: rgba(51, 51, 51, .85);
    }
  }

  .pro-action {
    margin-bottom: 16px;

    img {
      width: 84px;
      height: 84px;
      margin-right: 36px;
      border-radius: 4px;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .08);
    }

    .pro-main {
      flex: 1;
      padding: 6px 0;

      p {
        color: #333;
      }
    }
  }

  .pagination {
    justify-content: end;
    margin-top: 16px;
  }
}
</style>
